<template>
  <div>
    <van-list v-model:loading="loading" :finished="!loading" finished-text="" @load="onLoad">
      <van-cell v-for="(item, index) in data" :key=index is-link to="#" @click="goDetail(item)">
        <template #title>
          <span class="title">{{ item.examName }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import router from '../router'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { Toast } from 'vant'

const baseUrl = ''
// 声明响应式数据
const loading = ref(false); // 用于显示加载状态
const data = [{
  examName: "全国公路水运安全生产管理人员考试",
  examIndex: "0"
},
{
  examName: "建筑三类人员考试",
  examIndex: "1"
}]

const onLoad = () => {
  setTimeout(() => {
    loading.value = false
  }, 100)
}

// const store = useStore()
// console.log("store:", store)
const fetchQa = async () => {
  const examIndex = localStorage.getItem('examIndex')
  if (!examIndex) {
    Toast.fail('请先选择题库');
    return
  }
  const cacheKey = 'qasCache' + examIndex
  const cacheTSPKey = 'queryQaServerTSP' + examIndex
  const cache = localStorage.getItem(cacheKey)
  const tsp = parseInt(localStorage.getItem(cacheTSPKey))
  // console.log("tsp:", tsp)
  const now = new Date().getTime()
  if (cache && (now - tsp) < 24 * 60 * 60 * 1000) {
    // store.commit('update')
    console.log('App fetchQa 使用缓存')
    // this.qaDataLi = JSON.parse(cache)
  } else {
    console.log('fetchData 请求qas, examIndex: ', examIndex);
    localStorage.setItem(cacheKey, '')
    localStorage.setItem(cacheTSPKey, '')
    const url = baseUrl + '/getQas';
    // var tokenInfo = '{"username":"admin","token":"ec3c143bca34238a0093fc0b84030740"}'
    var tokenInfo = localStorage.getItem('tokenInfo')
    if (tokenInfo) {
      tokenInfo = tokenInfo.substring(0, tokenInfo.length - 1) + `,"examIndex":"` + examIndex + `"}`
    }
    try {
      const resp = await axios.post(url, tokenInfo, {
        headers: {
          'Content-Type': 'application/json', // 指定请求头的 Content-Type 为 JSON
        },
      })
      if (resp.code === 200) {
        localStorage.setItem(cacheKey, JSON.stringify(resp.res))
        localStorage.setItem(cacheTSPKey, '' + new Date().getTime())
        // store.commit('update')
        console.log('网络请求qa成功：', resp.res.length)
      } else if (resp.code === 401) {
        console.log('请求异常', resp)
        window.location.href = "/login.html"
      } else {
        Toast.fail(resp.msg);
      }
      // console.log(resp)
    } catch (error) {
      // 处理请求错误
      console.log('请求错误：', error);
    }
  }
}

const fetchCase = async () => {
  const examIndex = localStorage.getItem('examIndex')
  if (!examIndex) {
    Toast.fail('请先选择题库');
    return
  }
  const cacheKey = 'casesCache' + examIndex
  const cacheTSPKey = 'queryCaseServerTSP' + examIndex
  const cache = localStorage.getItem(cacheKey)
  const tsp = parseInt(localStorage.getItem(cacheTSPKey))
  const now = new Date().getTime()
  if (cache && (now - tsp) < 24 * 60 * 60 * 1000) {
    console.log('App fetchCase 使用缓存')
  } else {
    console.log('fetchData 请求case, examIndex: ', examIndex);
    localStorage.setItem(cacheKey, '')
    localStorage.setItem(cacheTSPKey, '')
    const url = baseUrl + '/getCases';
    // var tokenInfo = '{"username":"admin","token":"ec3c143bca34238a0093fc0b84030740"}'
    var tokenInfo = localStorage.getItem('tokenInfo')
    // localStorage.setItem('tokenInfo', tokenInfo)
    if (tokenInfo) {
      tokenInfo = tokenInfo.substring(0, tokenInfo.length - 1) + `,"examIndex":"` + examIndex + `"}`
    }
    try {
      const resp = await axios.post(url, tokenInfo, {
        headers: {
          'Content-Type': 'application/json', // 指定请求头的 Content-Type 为 JSON
        },
      })
      if (resp.code === 200) {
        localStorage.setItem(cacheKey, JSON.stringify(resp.res))
        localStorage.setItem(cacheTSPKey, '' + new Date().getTime())
        console.log('网络请求case成功：', resp.res.length)
      } else if (resp.code === 401) {
        console.log('请求异常', resp)
        window.location.href = "/login.html"
      } else {
        Toast.fail(resp.msg);
      }
    } catch (error) {
      // 处理请求错误
      console.log('请求错误：', error);
    }
  }
}

const fetchData = () => {
  fetchQa()
  fetchCase()
}

const goDetail = (item) => {
  localStorage.setItem('examIndex', item.examIndex)
  localStorage.setItem('examName', item.examName)
  fetchData()
  router.push({ path: '/question' })
}


</script>
<style lang="less" scoped>
.question {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 5vw;
}

.item-question {
  width: 42.5vw;
  margin-bottom: 5vw;

  .item-img {
    width: 42.5vw;
    height: 28vw;
    margin-right: 5vw;

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .item-cont {
    text-align: left;
    width: 100%;

    .item-title {
      font-weight: bold;
      line-height: 12vw;
    }

    .item-tips {
      color: #999;
      font-size: 12px;
      line-height: 4vw;
    }
  }
}

.addpadding {
  margin-right: 5vw
}

.title {
  font-weight: bold;
  color: #0074FF;
  font-size: 16px;
}
</style>